<template>
	<view class="user">
		<view class="user-t">
			<view class="user-t-a">
				<image :src="avatar" mode=""></image>
			</view>
			<view class="user-t-r">
				<view class="user-t-r-n">
					{{nickname}}
				</view>
				<view class="user-t-r-h">
					{{hospitalName}}
				</view>
			</view>
		</view>
		<!-- 工单列表 -->
		<view class="user-o">
			<view class="user-o-i" @tap="navOrder(item.id)" v-for="(item,index) in order" :key="item.id">
				<view class="user-o-i-n">
					{{item.name}}
				</view>
				<view class="user-o-i-m">
					<text class="user-o-i-m-a">{{item.num}}</text>条
				</view>
			</view>
		</view>
		<!-- 功能列表 -->
		<view class="user-g" @tap="jumpFun(item.id)" v-for="(item,index) in orderList" :key="item.id">
			<view class="user-g-i">
				<view class="user-g-i-i">
					<image :src="item.imgUrl" mode=""></image>
				</view>
				<view class="user-g-i-n">
					{{item.name}}
				</view>
			</view>
			<view class="user-g-a">
			</view>
		</view>
		<!-- 
		 <button open-type="contact" bindcontact="handleContact" session-from="sessionFrom"></button>
		 -->
		<button open-type="contact" bindcontact="handleContact" session-from="sessionFrom" class="user-g kefu">
			<view class="user-g-i" style="display: flex;align-items: center;">
				<view class="user-g-i-i">
					<image src="../../static/user3.png" mode=""></image>
				</view>
				<view class="user-g-i-n">
					联系客服
				</view>
			</view>
			<view class="user-g-a">
			</view>
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				avatar: '', //头像
				hospitalName: '', //医院名称
				nickname: '', //用户名称
				order: [{
					id: 4,
					name: '已报修',
					num: 0
				}, {
					id: 1,
					name: '进行中',
					num: 0
				}, {
					id: 2,
					name: '待结单',
					num: 0
				}, {
					id: 3,
					name: '已完成',
					num: 0
				}],
				orderList: [{
					id: 1,
					name: '维保工单',
					imgUrl: require('../../static/user1.png')
				}, {
					id: 2,
					name: '关于我们',
					imgUrl: require('../../static/user2.png')
				}]
			}
		},
		/* 	onLoad() {
				this.getUserInfo() //获取头像
			}, */
		onShow() {
			this.getUserInfo() //获取头像
		},
		methods: {
			getUserInfo() {
				/* 获取用户信息 */
				this.$https.post('/user/getUser').then(res => {
					this.order[0].num = res.data.accepted, //已申报
						this.order[1].num = res.data.ongoing, //进行中
						this.order[2].num = res.data.day_add, //待结单
						this.order[3].num = res.data.done, //已完成
						this.nickname = res.data.user.nickname, //用户名称
						this.avatar = res.data.user.avatar, //用户头像
						this.hospitalName = res.data.name //医院名称
				})
			},
			/* 工单跳转 */
			navOrder(id) {
				uni.navigateTo({
					url: '../order/order?id=' + id + '&type=' + 0 //0我的工单 1维保工单
				})
			},
			/* 功能跳转 */
			jumpFun(id) {
				switch (id) {
					case 1: //维保
						wx.navigateTo({
							url: '../order/order?type=' + 1 //0我的工单 1维保工单
						})
						break;
					case 2: //关于我们
						wx.navigateTo({
							url: '../about_us/about_us'
						})
						break;

				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.kefu {
		background-color: #FFFFFF;
	}

	button::after {
		/* background-color: #FFFFFF; */
		border: none;
	}

	.user {
		&-g {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx;

			&-i {
				display: flex;
				align-items: center;
				margin-right: 10rpx;

				&-i {
					width: 48rpx;
					height: 48rpx;
					position: relative;

					image {
						position: absolute;
						top: 0rpx;
						left: 0rpx;
						width: 100%;
						height: 100%;
					}
				}

				&-n {
					font-size: 28rpx;
					font-weight: 500;
					color: #3B3B3B;
					line-height: 33rpx;
				}
			}

			&-a {
				width: 15rpx;
				height: 15rpx;
				border-left: 5rpx solid #DADADA;
				border-bottom: 5rpx solid #DADADA;
				transform: rotate(225deg)
			}
		}

		&-o {
			margin: 52rpx 32rpx 0;
			padding-bottom: 56rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 4rpx solid #F5F6F8;

			&-i {
				flex: 1;
				text-align: center;

				&-n {
					font-size: 28rpx;
					font-weight: 500;
					color: #979797;
					line-height: 70rpx;
				}

				&-m {
					font-size: 24rpx;
					font-weight: 500;
					color: #3B3B3B;
					line-height: 28rpx;

					&-a {
						font-size: 44rpx;
						font-weight: 600;
						color: #000000;
						line-height: 52rpx;
						margin-right: 6rpx;
					}
				}
			}
		}

		&-t {
			display: flex;
			background-color: $public-oclor;
			padding: 68rpx 32rpx 52rpx;
			align-items: center;

			&-a {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 34rpx;
				border: 5rpx solid #FFFFFF;

				image {
					width: 100%;
					height: 100%;
				}
			}

			&-r {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 120rpx;

				&-n {
					font-size: 44rpx;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 52rpx;
				}

				&-h {
					font-size: 28rpx;
					font-weight: 600;
					color: rgba(255, 255, 255, 0.8);
					line-height: 33rpx;
				}
			}
		}
	}
</style>
